﻿@{
    ResponseDto resDto = (ResponseDto)ViewData["model"];
}

<style>
    .window {
        text-align: center;
        display: flex;
        align-content: flex-start;
        flex-flow: row wrap;
        width: 60%;
        margin: auto;
        margin-top: 100px;
    }

    .box {
        flex: 0 0 12%;
        width: 105px;
        height: 132px;
        margin-bottom: 20px;
        font-size: 15px;
        display: flex;
        align-items: flex-end;
        flex-flow: column;
    }

    .box_click {
        background: #CCE8FF;
        border: 1px solid #99D1FF;
    }

    .icon {
        height: 98px;
        width: 98px;
        margin: auto;
        margin-bottom: 0px;
        box-shadow: 1px 2px 5px 0px #bbc3c9;
    }

    .txt {
        padding: 5px 0;
        margin: auto;
        margin-bottom: 0px;
    }
</style>
<div class="window">
    @foreach (var file in resDto.FileInfo.Files)
    {
        <div class="box" onclick="event.cancelBubble = true"
         data-path="@(Model.Host + file.Path)" title="@file.Name">
            @{
                if (file.FileType == FILETYPE.IMAGE)
                {
                    <img class="icon" style="height:auto"
                 src="@(Model.Host + file.Path)" alt="@file.Name">
                }
                else
                {
                    <div class="icon" style="background: url(../images/icon/@file.Icon) no-repeat center center / contain;"></div>
                }
            }
            <div class="txt">@(file.Name)</div>
        </div>
    }
</div>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(function() {
        // 单击选中
        $(".box").click(function() {
            $(".box").removeClass("box_click");
            $(this).addClass("box_click");
        });
        // 双击跳转
        $(".box").dblclick(function() {
            var path = $(this).data("path");
            window.open("preview?url=" + path);
        });
        // 点击取消
        $(".window").parent().click(function() {
            $(".box").removeClass("box_click");
        });
    })
</script>
